<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="share/admin">

<head>

</head>

<div layout:fragment="content">

<div id="tab-system" class="HuiTab">
    <div class="tabBar cl"><span class="current">视频列表</span><span>音频列表</span></div>
    <div class="tabCon" style="display:block;padding-top:10px;">
        <div class="text-c">
            <form id="search">
                <button onclick="removeIframe()" class="btn btn-primary radius">关闭选项卡</button>
                <select class="select select-box inline selCate" name="catePath">
                    <option value="" path="/0">全部分类</option>
                </select>
                <select class="select select-box inline" name="postState">
                    <option value="">发布状态</option>
                    <option th:each="c:${states}" th:value="${c.id}" th:text="${c.name}"></option>
                </select>
                 日期范围：
                <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin" class="input-text Wdate" style="width:120px;">
                -
                <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })" id="logmax" class="input-text Wdate" style="width:120px;">
                <input type="text" name="name" id="" placeholder="名称" style="width:250px" class="input-text">
                <button id="btnSearch" class="btn btn-success" type="button"><i class="Hui-iconfont"></i> 搜索</button>
            </form>
        </div>

        <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 删除</a>
            <a class="btn btn-primary radius" data-title="添加" data-href="article-add.html" onclick="save()" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加</a></span>
            <span class="r"></span>
        </div>

        <table class="table table-border table-bordered table-hover table-bg table-sort" id="list">
            <thead>
            <tr>
                <th>名称</th>
                <th>标准名</th>
                <th>目录</th>
                <th>科目名</th>
                <th>设备号</th>
                <th>发布状态</th>
                <th>格式(概况)</th>
                <th>文件大小</th>
                <th>持续时间(概况)</th>
                <th>平均混合码率</th>
                <th>格式(视频)</th>
                <th>持续时间(视频)</th>
                <th>码率(视频)</th>
                <th>宽度</th>
                <th>高度</th>
                <th>扫描类型</th>
                <th>帧数</th>
                <th>fps</th>
                <th>创建日期</th>
                <th style="width:70px;text-align:center;"> </th>
            </tr>
            </thead>
        </table>
    </div>
</div>

</div>
<script type="text/javascript" layout:fragment="scripts" th:inline="none">
    var tbSettings = $.extend($.datatablesSettings, {
      "sAjaxSource": "video",
      "columns": [
                  { "data": "name" },
                  { "data": "nameStd" },
                  { "data": "cateName" },
                  { "data": "subject" },
                  { "data": "deviceId" },
                  { "data": "postState" },
                  { "data": "generalFormat" },
                  { "data": "fileSize" },
                  { "data": "generalDuration" },
                  { "data": "overallBitRate" },
                  { "data": "format" },
                  { "data": "duration" },
                  { "data": "bitRate" },
                  { "data": "width" },
                  { "data": "height" },
                  { "data": "scanType" },
                  { "data": "frames" },
                  { "data": "fps" },
                  { "data": "created" },
                  { "data": "id", "sClass": "text-c f-18" }//操作按钮列
              ],
              "columnDefs": [{
                  "targets": 18, "data": "Value", "render": function (data, type, full, meta) {
                      return new Date(data).format('yyyy-MM-dd');
                  }
              }, {
                  "targets": 19, "render": function (data, type, row) {
                      var postEvent = row.postState <= 10 ? "post('" + row.id + "');" : 'void(0);',
                        postTitle = row.postState <= 10 ? '发布': '已发布',
                        postIcon = row.postState <= 10 ? '<i class="Hui-iconfont"></i>' : '<i class="Hui-iconfont"></i>';
                      return '<a style="text-decoration:none" onclick="save(\'' + data + '\');" href="javascript:;" title="编辑"><i class="Hui-iconfont"></i></a>\
                                <a style="text-decoration:none" onclick="'+postEvent+'" href="javascript:;" title="'+postTitle+'">'+postIcon+'</a>\
                                  <a class="ml-5" style="text-decoration:none"  onclick="del('+ row.id + ');"  href="javascript:;" title="删除"><i class="Hui-iconfont"></i></a>';
                  }
              },
                  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                  { "orderable": false, "aTargets": [19] },// 制定列不参与排序
                  { sDefaultContent: '', aTargets: ['_all'] }
              ], "fnServerParams": function (aoData) {
                  //aoData.push({ "name": "real", "value": $(".tabBar .current").index() > 0 });
              }
    });
    var tb = $('#list').dataTable(tbSettings);
    // tb.fnDraw();
    basicData.getCateTree(".selCate", null, true);

    $('#btnSearch').click(function () {
        //这里重新设置参数
        tbSettings.fnServerParams = function (aoData) {
            var para = $("#search").serializeObject();
            aoData._rand = Math.random();
            for (var attr in para){
                aoData.push({ "name": attr, "value": para[attr]});
            }
            // alert(JSON.stringify(aoData));
        }
        //搜索就是设置参数，然后销毁datatable重新再建一个
        tb.fnDestroy(false);
        tb = $('#list').dataTable(tbSettings);
        //搜索后跳转到第一页
        tb.fnPageChange(0);
    });

    function save(id) {
        var url = 'video/save'+ (id ? ('?id='+ encodeURIComponent(id)) :"");

        layer_show('编辑', url, '600', '450');
    }
    function post(id) {
        var url = 'videoPost/save?videoId='+ encodeURIComponent(id);
        layer_show('视频发布', url, '600', '450');
    }

    function del(id) {
        if (!confirm('确定删除吗？')) return;

        $lv.actionJson('del', function (r) {
            if (r && r.data>0) tb.fnDraw(true);
            else $lv.toast('删除失败！');
        }, null, { id: id });
    }

</script>